<template>
  <div class="mod-config">
    <div style="margin-bottom: 5px;">
      <el-button @click="addGoods">单品添加商品</el-button>
      <el-button @click="batPrintGoodsBarCode">打印条码</el-button>
      <el-button @click="delTableData">删除</el-button>

      <div class="upload-wrap">
        <input ref="configInput" class="file-ele" id="config" type="file" @change="showConfig(this)"></input>
        <div class="file-open">打印配置</div>
      </div>
    </div>
    <div class="avue-crud">
      <el-table ref="table" border :data="dataList" v-loading="dataListLoading" @selection-change="handleSelectionChange">
        <el-table-column key="1" type="selection" width="40"></el-table-column>
        <el-table-column key="2" prop="code" label="商品代码" width="130"></el-table-column>
        <el-table-column key="4" prop="viewGoodsName" label="商品名称" min-width="180"></el-table-column>
        <el-table-column key="5" prop="brandName" label="品种名称" min-width="100"></el-table-column>
        <el-table-column key="6" prop="spec" label="型号" width="80"></el-table-column>
        <el-table-column key="7" prop="colorNumber" label="色号" width="60"></el-table-column>
        <el-table-column key="8" prop="goodsPrice" label="零售价" width="100"></el-table-column>
        <el-table-column key="9" prop="unitType" label="单位" width="60"></el-table-column>
        <el-table-column key="10" prop="goodsBarcode" label="商品条码" width="120"></el-table-column>
        <el-table-column key="11" label="打印数量" width="100">
          <template slot-scope="scope">
            <el-input v-model="scope.row.quantity" :ref="'quantity' + scope.$index"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹窗，添加商品 -->
    <search-goods v-if="goodsVisible" ref="goodsDialog" @updateForm="getGoodsData"></search-goods>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import {genPinYinCode} from "@/util/util";
  import { filterParams } from '@/util/tools'
  import { checkPrintNumber, PrintBarcode } from '@/util/printDs'
  import { printContent } from '@/api/eims/print/print'
  import SearchGoods from '../components/SearchGoodsPrice'

  export default {
    data() {
      return {
        goodsVisible: false,
        dataForm: {},
        dataList: [],
        dataListLoading: false,
        selectionList: [],
        printConfig: ''
      }
    },
    components: {
      SearchGoods
    },
    computed: {
      ...mapGetters(['permissions', 'bizData','userInfo'])
    },

    methods: {
      handleSelectionChange(val) {
        this.selectionList = val
      },
      showConfig(that){
        var _that = this
        var fr=new FileReader();
        var cover=document.getElementById('config').files[0];
        fr.readAsText(cover);
        fr.onload=function(e){
          // _that.printConfig = this.result
          localStorage.setItem('printData', '')
          localStorage.setItem('printData', this.result)
          // document.getElementById('coverImg').src = this.result;
        }
      },


      // 单品添加商品
      addGoods(){
        this.goodsVisible = true
        this.$nextTick(() => {
          this.$refs.goodsDialog.init(this.dataList)
        })
      },
      // 获取商品数据
      getGoodsData(row){
        row.forEach(item => {
          let code = item.code || item.goodsCode
          item.goodsBarcode = code.replace(/[\ |\.]/g,"") + ((item.invalidTime) ? (item.invalidTime.replace(/[\ |\-]/g,"")).substring(2,10) : '00000000')
        })
        this.dataList = [...row]
      },
      // 删除表格商品数据
      delTableData(){
        this.selectionList.forEach((item,index) => {
          for(let i = 0; i < this.dataList.length; i++){
            if(this.dataList[i].goodsId == item.goodsId && this.dataList[i].batch == item.batch && this.dataList[i].invalidTime == item.invalidTime){
              this.dataList.splice(i,1)
            }
          }
        })
        this.selectionList = []
      },
      // 条码批量打印
      batPrintGoodsBarCode(){
        let that = this
        let printData = localStorage.getItem('printData')
        if(printData){
          this.printConfig = printData
          if(checkPrintNumber(that)){
            this.$confirm('条码打印确认！','提示',{confirmButtonText:'确定',cancelButtonText:'取消',type: 'warning'}).then(()=>{PrintBarcode(that)})
          }
        }else{
          alert('请配置选择打印配置文件')
        }

      }
    }
  }
</script>
<style lang="scss" scoped>
  /deep/ .el-table {
    display: flex;
    flex-direction: column;
  }

  /deep/ .el-table__body-wrapper {
    // order: 1;
    z-index: 2;
  }

  .bg-row {
    padding-left: 5px;
    padding-top: 5px;
  }

  /deep/ .el-checkbox {
    text-align: right;
    width: 100%;
    padding-right: 0;
  }

  .upload-wrap{
    position: relative;
    float: right;
    display: inline-block;
    overflow: hidden;
    border-radius: 3px;
    margin-left: 10px;
  }
  .upload-wrap .file-ele{
    position: absolute;
    top:0;
    right:0;
    opacity: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
  }
  .upload-wrap .file-open{
    width:90px;
    height:30px;
    line-height:30px;
    text-align: center;
    color:#666;
    background-color: #fff;
  }
</style>
